<template>
  <div class="week_plan_state">
    <span class="block_label_color small_label" :class="stateColor">{{data.weekPlanStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'WeekPlanStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据周计划状态返回相应class
    stateColor() {
      switch (this.data.weekPlanStatusValue) {
        case 'Draft':
          // 草稿
          return 'week_plan_state_draft'
        case 'Unconfirmed':
          // 待确认
          return 'week_plan_state_unconfirmed'
        case 'Confirmed':
          // 已确认
          return 'week_plan_state_confirmed'
        case 'Dismissed':
          // 已退回
          return 'week_plan_state_dismissed'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 周计划状态颜色 */
  // 草稿
  @weekPlanStateDraft: #7e8e9f;
  // 待确认
  @weekPlanStateUnconfirmed: #ff931f;
  // 已确认
  @weekPlanStateConfirmed: #00a949;
  // 已退回
  @weekPlanStateDismissed: #f8000f;
  .week_plan_state{
    .block_label_color{
      /*周计划状态*/
      // 草稿
      &.week_plan_state_draft{
        background-color: @weekPlanStateDraft;
      }
      // 待确认
      &.week_plan_state_unconfirmed{
        background-color: @weekPlanStateUnconfirmed;
      }
      // 已确认
      &.week_plan_state_confirmed{
        background-color: @weekPlanStateConfirmed;
      }
      // 已退回
      &.week_plan_state_dismissed{
        background-color: @weekPlanStateDismissed;
      }
    }
  }
</style>
